import { createSlice } from "@reduxjs/toolkit";

import type { RootState } from "@/store";

export interface LayoutState {
  locale: string;
  siderWidth: number;
  navTheme: string;
  fixedHeader: boolean;
  colorWeak: boolean;
  primaryColor: string;
  layout: string;
  contentWidth: string;
  fixSiderbar: boolean;
  iconfontUrl: string;
  headerHeight: number;
  splitMenus: boolean;
  title: string;
  pwa: boolean;
  logo: string;
}

const initialState: LayoutState = {
  locale: "zh-CN",
  siderWidth: 208,
  navTheme: "light",
  fixedHeader: false,
  colorWeak: false,

  primaryColor: "#1890ff",
  layout: "side",
  contentWidth: "Fluid",
  fixSiderbar: false,
  iconfontUrl: "",
  headerHeight: 48,
  splitMenus: false,

  title: "Ant Design Pro",
  pwa: false,
  logo: "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg",
};

export const layoutSlice = createSlice({
  name: "setting",
  initialState: initialState,
  reducers: {
    setLayout(state, { payload }) {
      state.locale = payload.locale;
      state.siderWidth = payload.siderWidth;
      state.navTheme = payload.navTheme;
      state.fixedHeader = payload.fixedHeader;
      state.colorWeak = payload.colorWeak;
      state.primaryColor = payload.primaryColor;
      state.layout = payload.layout;
      state.contentWidth = payload.contentWidth;
      state.fixSiderbar = payload.fixSiderbar;
      state.iconfontUrl = payload.iconfontUrl;
      state.headerHeight = payload.headerHeight;
      state.splitMenus = payload.splitMenus;
      state.title = payload.title;
      state.pwa = payload.pwa;
      state.logo = payload.logo;
    },
  },
});

export const selectLayout = (state: RootState) => state.setting;
export const { setLayout } = layoutSlice.actions;
export default layoutSlice.reducer;
